<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页设计</title>
<meta charset="utf-8">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}
.column {
  float: left;
  width: 100%;
}
/* 头部样式 */
.header {
  background-color:grey;
  padding: 10px;
  text-align: center;
  color: white;
}

/* 导航条 */
.topnav {
  overflow: auto;
  background-color: #333;
  
  
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.topnav a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 25px;
}

/* 链接 - 修改颜色 */
.topnav a:hover:not(active) {
  background-color: #ddd;
  color: black;
  border-radius: 25px;
}

.picture {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color:white(36, 163, 47, 0.336);
  padding: 20px;
  margin-top: 20px;
}
.column {
  float: left;
  width: 100%;
}
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
  <h1>
    狗狗之家</h1>
    <img src="https://uploadfile.huiyi8.com/2018/af/6c/66/35/412054.jpg" alt="狗狗大全" width="200" height="200">
</div>
 
<div class="topnav">
    <a  href="file:///C:/Users/%E5%BE%90%E4%BA%9A%E8%B1%AA/Desktop/runoob/runoob.html">首页</a>
    <a href="file:///C:/Users/%E5%BE%90%E4%BA%9A%E8%B1%AA/Desktop/runoob/Untitled-1.html">狗狗大全</a>
    <a href="file:///C:/Users/%E5%BE%90%E4%BA%9A%E8%B1%AA/Desktop/runoob/Untitled-2.html">狗粮</a>
    <a class="active" href="file:///C:/Users/%E5%BE%90%E4%BA%9A%E8%B1%AA/Desktop/runoob/Untitled-3.html">狗狗日常用品</a>
  </div>
  <div class="footer">
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6oOKw7TgzTGKMz9lELv9xQHaHa?w=170&h=180&c=7&r=0&o=5&dpr=1.65&pid=1.7" alt="狗狗大全" width="50" height="50">
  </div>
</body>
</html>